import { useRef, useEffect } from 'react';

import * as echarts from 'echarts';
import './index.less';
interface BarChartProptype {
  xData: Number[];
  sData: Number[];
}
function echartInit(node: any, xData: Number[], sData: Number[]) {
  const myChart = echarts.init(node, 'dark');
  // 绘制图表
  myChart.setOption({
    backgroundColor: '',
    tooltip: {
      trigger: 'axis',
    },

    legend: {
      data: ['当月风险', '上月风险'],
      right: 40,
    },
    xAxis: [
      {
        type: 'category',
        data: ['桐乡', '海宁', '海盐', '南湖', '秀洲', '经开区'],
        axisPointer: {
          type: 'none',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        min: 0,
        max: 600,
        interval: 100,
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: '当月风险',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value: number) {
            return value;
          },
        },
        data: xData,
        label: {
          backgroundColor: 'red',
        },
      },
      {
        name: '上月风险',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value: number) {
            return value;
          },
        },
        data: sData,
        label: {
          backgroundColor: 'red',
        },
      },
    ],
  });
}

export default function BarChart(props: BarChartProptype) {
  const { xData, sData } = props;
  const pieRef = useRef<any>();
  useEffect(() => {
    echartInit(pieRef.current, xData, sData);
  }, [xData, sData]);

  window.addEventListener('resize', () => {
    echartInit(pieRef.current, xData, sData);
  });

  return <div ref={pieRef} className="BarChart"></div>;
}
